<template>
  <div class="logoPlayer">
    <audio ref="audio"></audio>
    <Row style class="row">
      <Col span="2" class="col">
        <div
          class="pic"
          v-on:click="showLrc"
          :style="{backgroundImage: 'url('+(music.album.cover||backgroundImage)+')'}"
        ></div>
      </Col>
      <Col span="4" class="col col-center">
        <Button type="error" ghost shape="circle" icon="ios-skip-backward" @click="previous()"></Button>
        <Button
          type="error"
          ghost
          shape="circle"
          :icon="isPlaying?'ios-pause':'ios-play'"
          @click="play(!isPlaying)"
        ></Button>
        <Button type="error" ghost shape="circle" icon="ios-skip-forward" @click="next()"></Button>
      </Col>
      <Col span="14" class="col">
        <span>{{music.name}}</span>
        <div style="float:right;">
          <span>{{currentTime|formatSeconds}}</span>/
          <span>{{duration|formatSeconds}}</span>
        </div>
        <Slider v-model="currentTime" :max="duration" @on-change="changeCurrentTime"></Slider>
      </Col>
      <Col span="4" class="col col-center">
        <Icon type="ios-heart-outline" size="20" color/>
        <Icon type="ios-shuffle" size="20"/>
        <Icon type="ios-volume-down" size="30"/>
        <Icon type="ios-list" size="25" @click="showList()"/>
      </Col>
    </Row>

    <Drawer
      title="播放列表"
      :styles="{}"
      width="500px"
      :class-name="'logo-playlist'"
      :mask-style="{'background-color':'transparent'}"
      :closable="true"
      v-model="showPlaylist"
    >
      <div slot="header">
        <Row>
          <Col span="4">
            <p>播放列表</p>
          </Col>
          <Col span="4" offset="16">
            <p style="font-weight:normal">
              <span @click="clear">
                <Icon type="ios-trash"/>清空
              </span>
            </p>
          </Col>
        </Row>
      </div>
      <div>
        <PlaylistComp></PlaylistComp>
      </div>
    </Drawer>
  </div>
</template>

<script>
import logoPlayerMusic from "./logo-player-core";
import { mapActions, mapGetters } from "vuex";
import PlaylistComp from "../playlist/playlist";

export default {
  name: "LogoPlayer",
  components: { PlaylistComp },
  props: {
    music: {
      type: [Object],
      default: {}
    },
    musicList: {
      type: [Array],
      default: () => []
    },
    currentIndex: {
      type: [Number],
      default: -1
    },
    autoplay: {
      type: [Boolean],
      default: false
    },
    onIndexChange: {
      type: [Function],
      default: null
    },
    prepareMusic: {
      type: [Function],
      default: null
    }
  },
  data() {
    return {
      isPlaying: this.autoplay,
      index: this.currentIndex,

      musicReady: false,
      currentTime: 0,
      duration: 0,
      showPlaylist: false,
      player: {},
      isShowLrc: false,
      backgroundImage: "http://pic.ffpic.com/files/tupian/tupian0277.jpg"
    };
  },
  computed: {
    ...mapGetters(["playlist"])
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.player = this.$refs.audio;
      this.player.autoplay = this.autoplay;

      logoPlayerMusic.init(this);

      if (this.autoplay) {
        this.playMusic();
      }
    });
  },
  watch: {
    music(newVal, oldVal) {
      console.log("newMusic", newVal, newVal.id);
      if (newVal.id != undefined) {
        if (newVal.id == oldVal.id) {
          return;
        }
        this.isPlaying = true;
        this.playMusic();
      } else {
        this.play(false);
        this.musicReady = false;
      }
    },
    musicList(newVal) {}
  },
  methods: {
    clear() {
      this.play(false);
      // this.musicReady = false;
      this.$nextTick(() => {
        this.currentTime = this.duration = 0;
        this.setPlaylist([]);
        this.setCurrentIndex(-1);
        this.player.src = "";
      });
    },
    play(isPlaying) {
      if (this.isPlaying) {
        this.player.pause();
      } else {
        if (this.musicReady) {
          this.player.play();
        } else {
          this.playMusic();
        }
      }
      this.isPlaying = isPlaying;
    },

    previous() {
      if (this.musicList.length > 0) {
        this.index--;
        this.index = this.index >= 0 ? this.index : this.musicList.length - 1;

        this.changeIndex();
      }
    },
    next() {
      if (this.musicList.length > 0) {
        this.index++;
        this.index = this.musicList.length > this.index ? this.index : 0;

        this.changeIndex();
      }
    },
    showList() {
      this.showPlaylist = !this.showPlaylist;
    },
    changeIndex() {
      if (this.onIndexChange) {
        this.onIndexChange(this.index);
      }
    },
    playMusic() {
      console.log(this.music);
      if (this.prepareMusic) {
        this.prepareMusic(this.music).then(result => {
          this.player.src = result.url;
        });
      }
    },

    showLrc() {
      if (!this.isShowLrc) {
        this.$router.push("/lyric");
      } else {
        this.$router.push("/");
      }

      this.isShowLrc = !this.isShowLrc;
    },
    changeCurrentTime(time) {
      this.player.currentTime = time;
    },
    ...mapActions(["setPlaylist", "setCurrentIndex"])
  },
  filters: {
    formatSeconds(time) {
      var minute = ("0" + parseInt(time / 60)).slice(-2);
      var seconds = ("0" + Math.round(time % 60)).slice(-2);

      return minute + ":" + seconds;
    }
  }
};
</script>
<style scoped>
.logoPlayer {
  border: solid 1px #d7dde4;
}
.row {
  display: flex;
  align-items: Center;
}

.col {
  height: 100%;
}

.col-center {
  vertical-align: center;
  text-align: center;
}

.pic {
  background-image: url("http://pic.ffpic.com/files/tupian/tupian0277.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  width: 72px;
  height: 72px;
}
</style>
<style>
.logo-playlist,
.logo-playlist > div.ivu-drawer.ivu-drawer-right {
  top: 20vh;
  height: 70vh;
}
</style>